<template>
  <div>
    <el-descriptions class="margin-top" title="合同信息" :column="3" border>
      <template #extra>
        <el-button v-if="OrderFlowState === 1" type="success">
          上传合同附件
        </el-button>
        <el-button
          v-if="OrderFlowState === 1"
          type="primary"
          @click="saveContract"
        >
          保存合同信息
        </el-button>
        <el-button
          v-if="OrderFlowState === 1"
          type="danger"
          @click="finishContract"
        >
          完成到单录入
        </el-button>
        <el-button
          v-if="OrderFlowState === 2"
          type="info"
          @click="finishContract"
        >
          到单录入已完成
        </el-button>
      </template>
    </el-descriptions>
    <el-form ref="formRef" :model="OrderInfo">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="合同业务类" required>
            <el-select v-model="OrderInfo.BusinessClassID" disabled>
              <el-option
                v-for="(item, index) in BusinessClassOptions"
                :key="index"
                :label="item.BusinessClassName"
                :value="item.BusinessClassID"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="合同编号" required>
            <el-input v-model="OrderInfo.OrderCode" :disabled="disabled" />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="签约日期" required>
            <el-date-picker
              v-model="OrderInfo.SignOrderDate"
              :disabled="disabled"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="合同属性" required>
            <el-select v-model="OrderInfo.OrderType" :disabled="disabled">
              <el-option
                v-for="(item, index) in orderTypeOption"
                :key="index"
                :label="item.OrderTypeName"
                :value="item.OrderTypeID"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="合同金额" required>
            <el-input
              v-model="OrderInfo.OrderTotalMoney"
              :disabled="disabled"
            />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="注：不含备付金金额" />
        </el-col>
        <el-col :span="6">
          <el-form-item label="备付金金额" required>
            <el-input v-model="OrderInfo.ReserveMoney" :disabled="disabled" />
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item label="注：用于抵扣销量佣金" />
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="24">
          <el-form-item label="备注" required>
            <el-input v-model="OrderInfo.OrderMemo" :disabled="disabled" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
  import { getBusinessClassSelect } from '@/api/common'
  import { saveOrderInfo } from '@/api/businessOrderCreate'

  export default defineComponent({
    name: 'OrderInfo',
    emits: ['fetch-data'],
    setup(props, { emit }) {
      const $baseMessage = inject('$baseMessage')

      const state = reactive({
        formRef: null,
        OrderFlowState: 1,
        disabled: false,
        OrderInfo: {
          OrderTypeID: 1,
        },
        rules: {
          title: [{ required: true, trigger: 'blur', message: '请输入标题' }],
        },
        title: '',
        dialogFormVisible: false,
        orderTypeOption: [
          { OrderTypeID: 1, OrderTypeName: '新签' },
          { OrderTypeID: 2, OrderTypeName: '当周期续费' },
          { OrderTypeID: 3, OrderTypeName: '提前续' },
          { OrderTypeID: 4, OrderTypeName: '销售回签' },
          { OrderTypeID: 5, OrderTypeName: '运营回签' },
          { OrderTypeID: 6, OrderTypeName: '跨组回签' },
          { OrderTypeID: 7, OrderTypeName: '换店服务' },
          { OrderTypeID: 8, OrderTypeName: '置换' },
        ],
        BusinessClassOptions: [],
      })

      const showOrder = (info) => {
        state.OrderFlowState = Math.abs(info.OrderFlowState)
        if (state.OrderFlowState !== 1) state.disabled = true
        console.log('state.OrderFlowState', state.OrderFlowState)
        state.OrderInfo = Object.assign({}, info)
      }

      const saveContract = () => {
        state['formRef'].validate(async (valid) => {
          if (valid) {
            const { msg } = await saveOrderInfo(state.OrderInfo)
            $baseMessage(msg, 'success', 'vab-hey-message-success')
            emit('fetch-data')
            close()
          }
        })
      }

      const finishContract = () => {
        state['formRef'].validate(async (valid) => {
          if (valid) {
            state.OrderInfo.OrderFlowState = 2
            state.OrderInfo.OrderState = 2
            const { msg } = await saveOrderInfo(state.OrderInfo)
            $baseMessage(msg, 'success', 'vab-hey-message-success')
            emit('fetch-data')
            close()
          }
        })
      }

      const fetchData = async () => {
        state.listLoading = true
        const {
          data: { BusinessClassOptions },
        } = await getBusinessClassSelect()
        state.BusinessClassOptions = BusinessClassOptions
        state.listLoading = false
      }

      onMounted(() => {
        fetchData()
      })

      return {
        ...toRefs(state),
        showOrder,
        saveContract,
        finishContract,
      }
    },
  })
</script>
